<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Leaflet点聚合插件使用（Leaflet.markercluster）</title>
  <!-- <link rel="stylesheet" href="./js/leaflet.css">
  <script src="./js/leaflet.js"></script> -->

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css"
    integrity="sha512-Zcn6bjR/8RZbLEpLIeOwNtzREBAJnUKESxces60Mpoj+2okopSAcSUIUOseddDm0cxnGQzxIR7vJgsLZbdLE3w=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"
    integrity="sha512-BwHfrr4c9kmRkLw6iXFdzcdWV/PGkVgiIyIWLLlTSXzWQzxuSg4DiQUCpauz/EWjgk5TYQqX/kvn9pG1NpYfqg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <!-- 引入 Leaflet.markercluster 相关依赖-->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.css"
    integrity="sha512-mQ77VzAakzdpWdgfL/lM1ksNy89uFgibRQANsNneSTMD/bj0Y/8+94XMwYhnbzx8eki2hrbPpDm0vD0CiT2lcg=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/MarkerCluster.Default.css"
    integrity="sha512-6ZCLMiYwTeli2rVh3XAPxy3YoR5fVxGdH/pz+KMCzRY2M65Emgkw00Yqmhh8qLGeYQ3LbVZGdmOX9KUjSKr0TA=="
    crossorigin="anonymous" referrerpolicy="no-referrer" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/1.5.3/leaflet.markercluster.js"
    integrity="sha512-OFs3W4DIZ5ZkrDhBFtsCP6JXtMEDGmhl0QPlmWYBJay40TT1n3gt2Xuw8Pf/iezgW9CdabjkNChRqozl/YADmg=="
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  <style>
    html,
    body,
    .map-box {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
    }
  </style>
</head>

<body>
  <div id="markerclusterMap" class="map-box"></div>

  <script>
    let maps = L.map('markerclusterMap', {
      center: [27.50409, 111.682279],
      zoom: 7,
      minZoom: 3,
      maxZoom: 18,
      zoomControl: true,  // 是否隐藏左上角的缩放
      attributionControl: false, // 是否隐藏右下角的信息显示
    })

    // OSM 地图服务
    // L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(maps);
    // 添加底图
    let tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png').addTo(maps);

    let clusterLayer = L.markerClusterGroup({
      // showCoverageOnHover: false,
      // zoomToBoundsOnClick: false,
      // spiderfyOnMaxZoom: false,
      // removeOutsideVisibleBounds: false,
      // spiderLegPolylineOptions: {}
      // 自定义聚合样式
      // iconCreateFunction: function (cluster) {
      // return L.divIcon({html: '<b class="bg-#[f40]">' + cluster.getChildCount() + '</b>'});
      // }
    });
    for (let i = 0; i < 100000; i++) {
      const marker = L.marker([27.50409 + Math.random(), 111.682279 + Math.random()], {
        title: `点 ${i}`,
        icon: L.icon({
          iconUrl: './imgs/pothole.png',
          iconSize: [20, 20],
          iconAnchor: [0, 0]
        })
      });

      marker.bindPopup(`点 ${i}`);

      marker.on('click', function (event) {
        console.log('marker ====', event.latlng);
      });

      marker.on('clusterclick', function (a) {
        // a.layer is actually a cluster
        console.log('cluster ' + a.layer.getAllChildMarkers().length);
      });
      clusterLayer.addLayer(marker);
    }
    maps.addLayer(clusterLayer);



  </script>
</body>

</html>